<template>
    <div class="search_main">
        <div class="top">
            <p>
                <span style="font-size: 25px;font-weight: 600;">搜索结果</span>
                <el-divider direction="vertical" />
                <el-segmented v-model="valueTable" :options="options" size="default" />
            </p>
        </div>
        <el-divider style="margin-top: 0px;" />
        <el-table @row-click="handleRowClick" :data="searchStore.searchList" style="width: 100%">
            <el-table-column prop="pic" width="80">
                <template #default="scope">
                    <img style="border-radius: 10px;" :src="`${config.downloadUrl}?name=${scope.row.pic}`" alt="图片"
                        width="50" height="50">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="标题" width="500" />
            <el-table-column v-if="valueTable == '单曲'" prop="name" label="歌手" width="200">
                <template #default="scope">
                    <span>{{ singerNames[scope.row.singerId] || '加载中...' }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="valueTable == '歌手'" prop="name" label="歌手" width="200" />
            <el-table-column v-if="valueTable == '单曲'" prop="introduction" label="专辑" />
            <el-table-column v-if="valueTable == '歌手'" prop="introduction" label="介绍" />
        </el-table>
    </div>
</template>

<script setup name="searchPage">
import { useSearchStore } from '@/store/search';
import { getSingerById, getSingerOnNameNoPage } from '@/api/singer';
import { selectBySongNameNoPage } from '@/api/song';
import { watch, ref, onMounted } from 'vue';
import config from '../../public/config';
import { audioMixin } from '@/mixins';
import { useAudioStore } from '@/store/audio';
import { useSingerStore } from '@/store/singer';


defineOptions({
    mixins: [audioMixin],
});

const valueTable = ref('单曲')
const options = ['单曲', '歌手']

const searchStore = useSearchStore()
const audioStore = useAudioStore()
const singerStore = useSingerStore()

// 添加一个响应式对象来存储歌手名称
const singerNames = ref({})

onMounted(() => {
    if (valueTable.value == '单曲') {
        getSong()
    }
    else if (valueTable.value == '歌手') {
        getSinger()
    }
})

watch(() => searchStore.searchKeyword, (value) => {
    if (value && valueTable.value == '单曲') {
        getSong()
    }
    else if (value && valueTable.value == '歌手') {
        getSinger()
    }
    if (value == '' && valueTable.value == '单曲') {
        getSong()
    }
    else if (value == '' && valueTable.value == '歌手') {
        getSinger()
    }
})

watch(() => valueTable.value, (value) => {
    if (value === '单曲') {
        getSong()
    } else if (value === '歌手') {
        getSinger()
    }
})

async function getSong() {
    let params = new URLSearchParams()
    params.append('name', searchStore.searchKeyword)
    const res = await selectBySongNameNoPage(params)
    searchStore.searchList = res
    // 获取所有歌手名称
    for (const song of res) {
        await getSingerName(song.singerId)
    }
}

async function getSinger() {
    let params = new URLSearchParams()
    params.append('name', searchStore.searchKeyword)
    getSingerOnNameNoPage(params)
        .then(res => {
            searchStore.searchList = res
        })
}

function handleRowClick(row) {
    if (valueTable.value == '单曲') {
        // 获取该行的索引值
        const index = audioStore.listOfSong.findIndex(item => item === row);
        console.log('点击的行数据:', row);
        // 你可以在这里进行你的操作，例如调用播放方法
        audioMixin.methods.toPlay(row.id, row.url, row.pic, row.name, row.singerId, row.lyric, index)
    } else if (valueTable.value == '歌手') {
        singerStore.isSingerOpen = true
        singerStore.singerId = row.id
    }
}

async function getSingerName(singerId) {
    if (!singerNames.value[singerId]) {
        let params = new URLSearchParams()
        params.append('id', singerId)
        const res = await getSingerById(params)
        singerNames.value[singerId] = res.name
    }
    return singerNames.value[singerId]
}
</script>

<style scoped>
.search_main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.top {
    display: flex;
    flex-direction: row;
    margin-top: 4%;
    margin-left: 5%;
}
</style>
